<template>
  <div class="member-home-page">
    <!-- 概览 -->
    <div class="xtx_overview">
      <!-- 用户信息 -->
      <div class="user_meta">
        <div class="avatar">
          <img :src="$store.state.user.avatar||defaultAvatar" alt />
        </div>
        <h4>{{$store.state.user.account}}</h4>
      </div>
      <div class="item">
        <a href="javascript:;" @click="$router.push('/member')">
          <span class="iconfont icon-hy"></span>
          <p>会员中心</p>
        </a>
        <a href="javascript:;" @click="$router.push('/member/safe')">
          <span class="iconfont icon-aq"></span>
          <p>安全设置</p>
        </a>
        <a href="javascript:;" @click="$router.push('/member/address')">
          <span class="iconfont icon-dw"></span>
          <p>地址管理</p>
        </a>
      </div>
    </div>
    <!-- 我的订单 -->
    <div class="xtx_orders xtx_panel">
      <div class="xtx_panel_header">
        <h4>我的订单</h4>
        <a href="javascript:;" class="more"  @click="$router.push('/member/order')">
          查看全部
          <i class="iconfont icon-angle-right"></i>
        </a>
      </div>
      <!-- 订单列表 -->
      <ul class="orders">
        <li>
          <div class="order_goods">
            <!-- 商品缩略图 -->
            <div class="thumb">
              <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/order_goods_1.jpg" alt />
            </div>
            <!-- 商品信息 -->
            <div class="info">
              <p class="name">拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</p>
              <p class="meta">颜色：白色 尺码：M 数量：1</p>
            </div>
            <div class="status">
              <span>待付款</span>
              <a href="javascript:;"></a>
            </div>
          </div>
          <div class="order_payment">
            <span class="price">￥99.00</span>
            <span>（含运费：¥10.00元）</span>
            <span>在线支付</span>
          </div>
          <div class="order_action">
            <a href="javascript:;" class="primary">立即付款</a>
            <a href="javascript:;">查看详情</a>
            <a href="javascript:;">取消订单</a>
          </div>
        </li>
        <li>
          <div class="order_goods">
            <!-- 商品缩略图 -->
            <div class="thumb">
              <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/order_goods_2.jpg" alt />
            </div>
            <!-- 商品信息 -->
            <div class="info">
              <p class="name">拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</p>
              <p class="meta">颜色：白色 尺码：M 数量：1</p>
            </div>
            <div class="status">
              <span>待收货</span>
              <a href="javascript:;">查看物流</a>
            </div>
          </div>
          <div class="order_payment">
            <span class="price">￥99.00</span>
            <span>（含运费：¥10.00元）</span>
            <span>在线支付</span>
          </div>
          <div class="order_action">
            <a href="javascript:;" class="primary">确认收货</a>
            <a href="javascript:;">查看详情</a>
            <a href="javascript:;">再次购买</a>
          </div>
        </li>
      </ul>
    </div>

    <!-- 我的收藏 -->
    <div class="xtx_collects xtx_panel">
      <div class="xtx_panel_header">
        <h4>收藏的商品</h4>
        <a href="javascript:;" class="more" @click="$router.push('/member/collect/goods')">
          查看全部
          <i class="iconfont icon-angle-right"></i>
        </a>
      </div>
      <div class="xtx_panel_goods">
        <a href="javascript:;" class="item">
          <div class="img-box">
            <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/collect_goods_1.jpg" alt />
          </div>
          <p class="name">人本秋季厚底帆布鞋韩版低帮增高学生</p>
          <p class="price">
            <small>￥</small>55.00
          </p>
        </a>
        <a href="javascript:;" class="item">
          <div class="img-box">
            <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/collect_goods_2.jpg" alt />
          </div>
          <p class="name">迪士尼真皮针扣表带宽度14-16mm规格双色压纹</p>
          <p class="price">
            <small>￥</small>20.90
          </p>
        </a>
        <a href="javascript:;" class="item">
          <div class="img-box">
            <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/collect_goods_3.jpg" alt />
          </div>
          <p class="name">三都港 冷冻无公害黄花鱼700g 2条 袋装 生</p>
          <p class="price">
            <small>￥</small>209.00
          </p>
        </a>
        <a href="javascript:;" class="item">
          <div class="img-box">
            <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/collect_goods_4.jpg" alt />
          </div>
          <p class="name">ONLY夏季新款高腰宽松七分阔腿裙裤休闲裤</p>
          <p class="price">
            <small>￥</small>274.50
          </p>
        </a>
      </div>
    </div>

    <!-- 我的足迹 -->
    <div class="xtx_history xtx_panel">
      <div class="xtx_panel_header">
        <h4>我的足迹</h4>
        <a href="javascript:;" class="more" @click="$router.push('/member/foot')">
          查看全部
          <i class="iconfont icon-angle-right"></i>
        </a>
      </div>
      <div class="xtx_panel_goods">
        <a href="javascript:;" class="item">
          <div class="img-box">
            <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/history_goods_1.jpg" alt />
          </div>
          <p class="name">拉夫劳伦t恤男正品 圆领短袖</p>
          <p class="price">
            <small>￥</small>99.00
          </p>
        </a>
        <a href="javascript:;" class="item">
          <div class="img-box">
            <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/history_goods_2.jpg" alt />
          </div>
          <p class="name">李宁跑步鞋男鞋空气弧 2018春季款</p>
          <p class="price">
            <small>￥</small>171.90
          </p>
        </a>
        <a href="javascript:;" class="item">
          <div class="img-box">
            <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/history_goods_3.jpg" alt />
          </div>
          <p class="name">三都港 冷冻无公害黄花鱼700g 2条 袋装 生</p>
          <p class="price">
            <small>￥</small>209.00
          </p>
        </a>
        <a href="javascript:;" class="item">
          <div class="img-box">
            <img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/history_goods_4.jpg" alt />
          </div>
          <p class="name">ONLY夏季新款高腰宽松七分阔腿裙裤休闲裤</p>
          <p class="price">
            <small>￥</small>274.50
          </p>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'member-home-page',
  data () {
    return {
      defaultAvatar: require('@/assets/images/200.png')
    }
  }
}
</script>

<style scoped lang='less'>
@import './styles/index.less';
</style>
